<template>
  <div class="table">
    <vxe-table resizable :data="tableData" ref="xTable" header-align="center"
      :header-row-class-name="Header" :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
      header-cell-class-name="Header" cell-class-name="tableBody" :span-method="rowspanMethod"
      :row-config="{ isHover: true, isCurrent: true }" @cell-click="getContent" align="center"
      @edit-actived="editActivedEvent" :auto-resize="true" :loading="loading"
      :loading-config="{ 'icon': 'vxe-icon-refresh roll' }"
      :auto-resizable="true"
      :show-overflow="tooltip"
      >
      <vxe-column field="fatherId" title="章节/序号" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #default="{ row }">
          {{ row.fatherId }}
        </template>
        <template #edit="{ row }">
          {{ row.fatherId }}
        </template>
      </vxe-column> <vxe-column field="titleFir" title="一级章节名称" :edit-render="{ autofocus: '.vxe-input--inner' }">
        <template #default="{ row }">
          {{ row.titleFir }}
        </template>
        <template #edit="{ row }">
          <vxe-textarea :rows="2" className="content" v-model="row.titleFir" type="text" :disabled="catalogueEdit"></vxe-textarea>
        </template>
      </vxe-column>
      <vxe-column field="titleSec" title="二级章节名称" :edit-render="{}">
        <template #default="{ row }">
          {{ row.titleSec }}
        </template>
        <template #edit="{ row }">
          <vxe-textarea :rows="2" className="content" v-model="row.titleSec" type="text"
            :disabled="(catalogueEdit || (row.depth == 1 && !row.hasChild))"></vxe-textarea>
        </template>
      </vxe-column>
      <vxe-column field="content" title="内容" :edit-render="{}">
        <template #default="{ row }">
          {{ row.label }}
        </template>
        <template #edit="{ row }">
          <vxe-textarea v-model="row.label" :rows="10" className="content" type="text" :disabled="catalogueEdit" ></vxe-textarea>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>

export default {
  data() {
    return {
      tableData: [
        // 测试数据
        // {
        //   id: 0, titleFir: '第一节', content: '第一大节内容', titleSec: '1.1', depth: 1, hasChild: true, fatherId: 0, curRow: 0, label: '第一大节内容'
        // },
        // {
        //   id: 0, titleFir: '第一节', titleSec: '1.1', content: '1.1内容', depth: 2, fatherId: 0,
        // },
        // {
        //   id: 1, titleFir: '第一节', titleSec: '1.2', content: '1.2内容', depth: 2, fatherId: 0,
        // },
        // {
        //   id: 1, titleFir: '第二节', titleSec: '空1', content: '第二大节内容', depth: 1, hasChild: true, fatherId: 1, curRow: 3, label: '第二大节内容'
        // },
        // {
        //   id: 0, titleFir: '第二节', titleSec: '空1', content: '空1', depth: 2, fatherId: 1
        // },
        // {
        //   id: 1, titleFir: '第二节', titleSec: '空2', content: '空2', depth: 2, fatherId: 1
        // },
        // {
        //   id: 2, titleFir: '第三节', titleSec: '空', content: '空', depth: 1, content: '第三大节内容', hasChild: false, fatherId: 2, curRow: 6, label: '第三大节内容'
        // },
      ],
      loading: true,
      oldRowInd: 0,
      label: '',
    }
  },
  props:{
    catalogue: Object
  },
  mounted(){
    // this.tableData = this.$props.courseCatalogue.children
  },
  methods: {
    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod({ row, _rowIndex, column, _columnIndex, visibleData }) {
      let fields = ['fatherId', 'titleSec', 'titleFir', 'content']
      let cellValue = row[column.property]
      if (cellValue || cellValue == 0) {
        if (fields.includes(column.property)) {
          let prevRow = visibleData[_rowIndex - 1]
          let nextRow = visibleData[_rowIndex + 1]
          if (prevRow && ((prevRow[column.property] == cellValue && prevRow[fields[0]] == row[fields[0]])
            || (prevRow[fields[0]] == row[fields[0]] && column.property == 'content')
          )) {      //当前行和上一行内容相同
            return { rowspan: 0, colspan: 0 }
          } else {
            let countRowspan = 1
            while (nextRow && ((nextRow[column.property] == cellValue && nextRow[fields[0]] == row[fields[0]])
              || (nextRow[fields[0]] == row[fields[0]] && column.property == 'content')
            )) {
              nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 }
            }
          }
        }
      }
    },
    initTableList(catalogue) {              //初始化table
      this.tableData = []
      let length = 1
      for (let i = 0; i < catalogue.children.length; i++) {
        let BigTit = catalogue.children[i]
            //只有第一标题
          let row = {
            id: i, 
            titleFir: BigTit.label,
            content: BigTit.content,
            titleSec: '无',         //初始值
            depth: 1,
            hasChild: false,
            fatherId: i,
            curRow: length-1,
            label: BigTit.content
          }
          this.tableData[i] = (row)
        if (catalogue.children[i].isLeft) {
          continue
        }
        else {                                            //第二标题
          this.tableData[i].titleSec = BigTit.children[0].label
          this.tableData[i].hasChild = true
          for (let u = 0; u < BigTit.children.length; u++) {
            let smallTit = BigTit.children[i]
            let row = {
              id: u,
              titleFir: BigTit.label,
              titleSec: smallTit.label,
              content: smallTit.content,
              depth: 2,
              fatherId: i,
            }
            this.tableData.push(row)
          }
        }
        length += BigTit.children.length + 1
      }
    },
    getContent({ row, rowIndex, $rowIndex, column, columnIndex, visibleData }) {
      if (columnIndex == 1) {
        this.tableData[row.curRow].content = row.label
        row.curRow = rowIndex
        row.label = row.content
      } else if (columnIndex == 2) {
        if (row.depth == 1 && row.hasChild) {
          console.log(row);
          this.tableData[row.curRow].content = row.label
          row.curRow = rowIndex + 1
          row.label = this.tableData[rowIndex + 1].content
        } else if (row.depth == 2) {
          console.log(rowIndex - row.id, this.tableData[rowIndex - row.id - 1].curRow);
          this.tableData[this.tableData[rowIndex - row.id - 1].curRow].content = this.tableData[rowIndex - row.id - 1].label
          this.tableData[rowIndex - row.id - 1].curRow = rowIndex
          this.tableData[rowIndex - row.id - 1].label = row.content
        }
      }
    },

  },
  props: {
    catalogue: {
      type: Object || Array
    },
    catalogueEdit: {
      type: Boolean
    }
  },
  watch: {
    catalogue: {
      handler: function (newVal) {
        console.log(newVal);
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {
    setTimeout(() => {this.initTableList(this.$props.catalogue); this.loading = false}, 2000)
  }
}
</script>
<style scoped>
.table {
  width: 100%;
}

.titleFir {
  display: none;
}
</style>
<style>
.Header {
  background-color: #dbdde3;
  border: solid 1px #707070;
  font-family: Source Han Sans CN;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 21px;
  letter-spacing: 0px;
  color: #707070;
}

.tableBody {
  background-color: #fafafa;
  border: solid 1px #707070;
  white-space:pre-wrap;
	word-wrap: break-word;
  color: #707070;
  font-family: Source Han Sans CN;
  font-size: 16px;
}

.vxe-icon-refresh.roll {
  color: #707070;
}

.vxe-loading--text {
  color: #707070;
  font-family: Source Han Sans CN;
}

.hide {
  display: none;
}
.content{
  background-color: pink;
  margin-bottom: 14px;
  font-family: Source Han Sans CN;
	font-size: 15px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 18px;
	letter-spacing: 0px;
	color: #707070;
  background-color: #fafafa;
}
</style>
